<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        ul {
            list-style-type: none;
        }

        #main {
            position: relative;
        }

        .box {
            padding: 0 30px 0 30px;
            float: left;
        }


        .pic {
            /* padding: 10px; */
            /* border: 1px solid red; */
            border-radius: 5px;
            /* box-shadow: 0 0 5px #ccc; */
        }

        .pic img {
            width: 260px;
            height: auto;
        }
    </style>
</head>

<body>

    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="img/1.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="pic">
                <img src="img/2.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="pic">
                <img src="img/3.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="pic">
                <img src="img/4.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="pic">
                <img src="img/5.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="pic">
                <img src="img/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/12.jpg" alt="">
            </div>
        </div>



    </div>



    <script>
        //
        window.onload = function () {
            waterfall('main', 'box');

            window.onscroll = function () {
                if (checkScrollSlide) {
                    var oParent = document.getElementById('main');
                    for (var i = 0; i < 11; i++) {
                        var oBox = document.createElement('div');
                        oBox.className = 'box';
                        oParent.appendChild(oBox);


                        var oPic = document.createElement('div');
                        oPic.className = 'pic';
                        oBox.appendChild(oPic);

                        var oImg = document.createElement('img');
                        // oImg.scr="img/"+dataInt.data[i].src;
                        oImg.src = "img/" + (i + 1) + ".jpg";
                        oPic.appendChild(oImg);
                    }
                    waterfall('main', 'box');

                }
                // checkScrollSlide();
            }
        }

        function waterfall(parent, box) {
            var oParent = document.getElementById(parent);
            var oBoxs = getByClass(oParent, box); //获取父元素下的所有的class为box的子元素
            var oBoxW = oBoxs[0].offsetWidth;
            //列数
            var clos = Math.floor(document.documentElement.clientWidth / oBoxW);


            // console.log(clos);
            //设置main的宽度
            oParent.style.cssText = 'width:' + oBoxW * clos + 'px;margin:0 auto';

            var arrH = new Array();
            // console.log(arrH);
            for (var i = 0; i < oBoxs.length; i++) {
                if (i < clos) {
                    arrH.push(oBoxs[i].offsetHeight);
                } else {
                    //获取高度最小的图片
                    var minH = Math.min.apply(null, arrH);
                    // console.log(minH);

                    //获取高度最小的图片的index
                    var index = getIndexMinH(arrH, minH);

                    oBoxs[i].style.position = 'absolute';
                    oBoxs[i].style.top = minH + 'px';
                    oBoxs[i].style.left = oBoxW * index + 'px';
                    arrH[index] = arrH[index] + oBoxs[i].offsetHeight;

                }
            }
            // console.log(arrH);
        }

        function getByClass(parent, box) {
            var boxs = new Array(); //用来存取box的元素
            tags = parent.getElementsByTagName('*'); //获取父元素下的所有元素
            for (var i = 0; i < tags.length; i++) {
                if (tags[i].className == box) {
                    boxs.push(tags[i]);
                }
            }
            return boxs;
        }

        function getIndexMinH(arr, val) {
            for (var i in arr) {
                if (arr[i] == val) {
                    return i;
                }
            }
        }



        function checkScrollSlide() {
            var oParent = document.getElementById('main');
            var oBoxs = getByClass(oParent, 'box');
            var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight / 2);
            var ScrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.body.clientHeight || document.documentElement.clientHeight;
            //    console.log(ScrollTop);
            return (lastBoxH < ScrollTop + height) ? true : false;
        }
    </script>

</body>

</html>